<template>
  <!-- 左边导航 -->
  <div class="leftNav">
    <div class="logo"></div>
    <!-- 在线音乐 -->
    <div class="online_music">
      <dl>
        <dt>在线音乐</dt>
        <dd class="icon_dd dd_1_black">推荐</dd>
        <dd class="focusDd icon_dd dd_2_white">音乐馆</dd>
        <dd class="icon_dd dd_3_black">视频</dd>
        <dd class="icon_dd dd_4_black">电台</dd>
      </dl>
    </div>

    <!-- 我的音乐 -->
    <div class="my_music">
      <dl>
        <dt>我的音乐</dt>
        <dd class="icon_dd dd_5_black">我喜欢</dd>
        <dd class="focusDd icon_dd dd_6_white">本地和下载</dd>
        <dd class="icon_dd dd_7_black">最近播放</dd>
        <dd class="icon_dd dd_8_black">试听列表</dd>
      </dl>
    </div>

    <!-- 创建歌单 -->
    <div class="create_song_list">
      <dl>
        <dt>创建的歌单</dt>
        <dd class="focusDd">我的歌单</dd>
        <dd>默认列表</dd>
      </dl>
    </div>

    <!-- 收藏的歌单 -->
    <div class="favorite_song_list">
      <dl>
        <dt>收藏的歌单</dt>
        <dd class="focusDd">我的收藏</dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftNav",
  data() {
    return {
      msg: "左导航栏",
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped>
.leftNav {
  width: 210px;
  height: 100%;
  background-color: #f0f0f0;
  position: absolute;
  left: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
/* logo */
.leftNav .logo {
  width: 100%;
  height: 85px;
  background: url(../assets/logo.jpg) no-repeat center;
}
/* 在线音乐 */
.leftNav .online_music {
  width: 160px;
  margin: 20px auto 30px auto;
}
.leftNav .online_music dt {
  height: 47px;
  line-height: 47px;
  color: #787878;
}
.leftNav .online_music dd {
  height: 30px;
  line-height: 30px;
  color: #303030;
  border-radius: 5px;
  padding-left: 39px;
  cursor: pointer;
  margin-bottom: 10px;
}
.leftNav .online_music dd:hover {
  background-color: #d8d8d8;
}
.leftNav .online_music dd.focusDd {
  background-color: #1ed0a1;
  color: #d2f6ee;
}
.leftNav .online_music dd.icon_dd {
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: 9px center;
}
.leftNav .online_music dd.dd_1_white {
  background-image: url(../assets/left_Icon_1_white.png);
}
.leftNav .online_music dd.dd_1_black {
  background-image: url(../assets/left_Icon_1_black.png);
}
.leftNav .online_music dd.dd_2_white {
  background-image: url(../assets/left_Icon_2_white.png);
}
.leftNav .online_music dd.dd_2_black {
  background-image: url(../assets/left_Icon_2_black.png);
}
.leftNav .online_music dd.dd_3_white {
  background-image: url(../assets/left_Icon_3_white.png);
}
.leftNav .online_music dd.dd_3_black {
  background-image: url(../assets/left_Icon_3_black.png);
}
.leftNav .online_music dd.dd_4_white {
  background-image: url(../assets/left_Icon_4_white.png);
}
.leftNav .online_music dd.dd_4_black {
  background-image: url(../assets/left_Icon_4_black.png);
}
/* 我的音乐 */
.leftNav .my_music {
  width: 160px;
  margin: 20px auto 30px auto;
}
.leftNav .my_music dt {
  height: 47px;
  line-height: 47px;
  color: #787878;
}
.leftNav .my_music dd {
  height: 30px;
  line-height: 30px;
  color: #303030;
  border-radius: 5px;
  padding-left: 39px;
  cursor: pointer;
  margin-bottom: 10px;
}
.leftNav .my_music dd:hover {
  background-color: #d8d8d8;
}
.leftNav .my_music dd.focusDd {
  background-color: #1ed0a1;
  color: #d2f6ee;
}
.leftNav .my_music dd.icon_dd {
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: 9px center;
}
.leftNav .my_music dd.dd_5_white {
  background-image: url(../assets/left_Icon_5_white.png);
}
.leftNav .my_music dd.dd_5_black {
  background-image: url(../assets/left_Icon_5_black.png);
}
.leftNav .my_music dd.dd_6_white {
  background-image: url(../assets/left_Icon_6_white.png);
}
.leftNav .my_music dd.dd_6_black {
  background-image: url(../assets/left_Icon_6_black.png);
}
.leftNav .my_music dd.dd_7_white {
  background-image: url(../assets/left_Icon_7_white.png);
}
.leftNav .my_music dd.dd_7_black {
  background-image: url(../assets/left_Icon_7_black.png);
}
.leftNav .my_music dd.dd_8_white {
  background-image: url(../assets/left_Icon_8_white.png);
}
.leftNav .my_music dd.dd_8_black {
  background-image: url(../assets/left_Icon_8_black.png);
}
/* 创建歌单 */
.leftNav .create_song_list {
  width: 160px;
  margin: 20px auto 30px auto;
}
.leftNav .create_song_list dt {
  height: 47px;
  line-height: 47px;
  color: #787878;
}
.leftNav .create_song_list dd {
  height: 30px;
  line-height: 30px;
  color: #303030;
  border-radius: 5px;
  padding-left: 11px;
  cursor: pointer;
  margin-bottom: 10px;
}
.leftNav .create_song_list dd:hover {
  background-color: #d8d8d8;
}
.leftNav .create_song_list dd.focusDd {
  background-color: #1ed0a1;
  color: #d2f6ee;
}
/* 收藏的歌单 */
.leftNav .favorite_song_list {
  width: 160px;
  margin: 20px auto 30px auto;
}
.leftNav .favorite_song_list dt {
  height: 47px;
  line-height: 47px;
  color: #787878;
}
.leftNav .favorite_song_list dd {
  height: 30px;
  line-height: 30px;
  color: #303030;
  border-radius: 5px;
  padding-left: 11px;
  cursor: pointer;
  margin-bottom: 10px;
}
.leftNav .favorite_song_list dd:hover {
  background-color: #d8d8d8;
}
.leftNav .favorite_song_list dd.focusDd {
  background-color: #1ed0a1;
  color: #d2f6ee;
}
</style>
